import Taro, { Component } from "@tarojs/taro";
import { View, Button, Text, Image } from "@tarojs/components";
import { AtInput, AtModal } from "taro-ui";
import Head from "../../components/head";
import { connect } from "@tarojs/redux";
import { reqCash } from "../../actions/account";
import "./complete.less";

@connect(({ account, appconfig }) => ({
  ...account,
  ...appconfig
}))
class Complete extends Component {
  config = {
    navigationBarTitleText: "绑定银行卡"
  };

  state = {
    amount: "",
    showModal: false
  };

  confirmWithdrawal() {
    const { amount } = this.state;
    const { money } = this.props;
    const valNum = /^[1-9]\d*|0$/;
    if (amount === "") {
      Taro.showToast({
        title: "请输入提现金额.",
        icon: "none"
      });
      return false;
    }
    if (!valNum.test(amount)) {
      Taro.showToast({
        title: "请输入正确的数字.",
        icon: "none"
      });
      return false;
    }
    if (amount > money) {
      Taro.showToast({
        title: "账户可用余额不足，请重新输入.",
        icon: "none"
      });
      return false;
    }
    this.setState({
      showModal: true
    });
  }

  completeBank() {
    const { amount } = this.state;
    reqCash({ amount }).then(result => {
      if (result) {
        Taro.showToast({
          title: "申请成功",
          icon: "success"
        });
        Taro.redirectTo({
          url: "/pages/mine/success"
        });
      }
    });
  }

  render() {
    const { rname, banknum, money } = this.props;
    const modalDoc = (
      <View className="complete-modal-index">
        <View className="user-info">
          <Text style="margin-left:15px;">姓名：{rname}</Text>
          <Text style="margin-left:15px;margin-top:10px;">
            银行卡号：{banknum}
          </Text>
          <Text style="margin-left:15px;margin-top:10px;">
            提现金额：￥ {money}
          </Text>
        </View>
        <View className="prompt-info">
          请再次确认您的信息，确认无误后点击提现，提现金额将在1个工作日内打款到您的银行账户
        </View>
        <Button className="binding-btn" onClick={this.completeBank.bind(this)}>
          确认提现
        </Button>
      </View>
    );
    const { fo } = this.$router.params;
    const urlPath = !fo ? '/pages/mine/withdrawal':'/pages/mine/index'
    return (
      <View className="complete-index">
        <Head title="提现" urlPath={urlPath} />
        <View className="complete-body">
          <View className="complete-prompt-head">
            <View className="img">
              <Image
                style="width:18px;height:18px;"
                src={require("../../assets/img/warning.png")}
              />
            </View>
            <View className="font">
              提现金额将在申请提交后的一个工作日内打到您的银行卡账户，请注意查收
            </View>
          </View>
          <View className="complete-divider-line" />
          <View className="complete-user-info">
            <Text className="complete-info-font">姓名：{rname}</Text>
            <View className="at-row">
              <View className="at-col at-col-10">
                <Text className="complete-info-font">银行卡号：{banknum}</Text>
              </View>
              <View className="at-col at-col-2" style="text-align:right" onClick={() => {
                Taro.redirectTo({
                  url:'/pages/mine/withdrawal'
                })
              }}>
                <Text style="font-size:14px;color:#F79F50;">修改</Text>
              </View>
            </View>
          </View>
          <View className="complete-divider-line" />
          <View className="complete-money">
            <Text style="font-size:14px;">提现金额</Text>
            <View className="enter-money">
              <Text>￥</Text>
              <AtInput
                name="amount"
                type="number"
                border={false}
                value={this.state.amount}
                onChange={value => {
                  this.setState({
                    amount: value
                  });
                }}
                placeholder="请输入数字"
              />
            </View>

            <View className="at-row">
              {this.state.amount !== "" && this.state.amount > money ?
                  (
                //   <View className="at-col at-col-12" >
                //     <Text style="font-size:12px;color:#808695;">
                //       不满{cashMin}元服务费每笔{commission_rate[0]}元,超过{cashMin}元按(费率{(commission_rate[1] * 100) + '%'})
                //     </Text>
                //   </View>
                // ) : (
                  <View className="at-col at-col-12">
                    <Text style="font-size:12px;color:#f5222d;">
                      输入金额超过账户金额
                    </Text>
                  </View>
                // )
              ) : (
                [
                  <View className="at-col at-col-10">
                    <Text style="font-size:12px;color:#C0C4CC">
                      可提现金额{money}元
                    </Text>
                  </View>,
                  <View
                    onClick={() => {
                      this.setState({
                        amount: money
                      });
                    }}
                    className="at-col at-col-2"
                    style="text-align:right"
                  >
                    <Text style="font-size:14px;color:#409EFF;">全部提现</Text>
                  </View>
                ]
              )}
            </View>
          </View>
          <Button
            onClick={this.confirmWithdrawal.bind(this)}
            disabled={this.state.amount > money}
            className="complete-confirm"
            type="parimary"
          >
            确认提现
          </Button>
        </View>
        <AtModal
          isOpened={this.state.showModal}
          title="银行卡确认"
          content={modalDoc}
        />
      </View>
    );
  }
}
export default Complete;
